<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        body {
            background-color: #eee;
        }

        .flower {
            width: 200px;
            height: 200px;
            border-radius: 100% 0 100% 0 / 0 0 100% 100%;
            background-image: linear-gradient(to top right, rgb(53, 34, 173), rgb(155, 17, 164), rgb(251, 1, 153));
            display: inline-block;
        }

        .bubble {
            position: relative;
            width: 300px;
            height: 90px;
            border-radius: 10px;
            border: 2px solid #1890f9;
            display: inline-block;
        }

        .bubble::before,
        .bubble::after {
            content: '';
            position: absolute;
            left: 50%;
            margin-left: -10px;
            width: 0;
            height: 0;
            border: 10px solid;
        }

        .bubble::before {
            top: 90px;
            border-color: #1890f9 transparent transparent;
        }

        .bubble::after {
            top: 87px;
            border-color: #eee transparent transparent;
        }

        .circle {
            margin-top: 20px;
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            border-radius: 50%;
            padding-left: 50px;
            background-image: linear-gradient(to left, #fff, #fff 50%, #000 50%, #000);
            animation: roll 8s linear infinite;
            animation-direction: reverse;
            display: inline-block;
        }

        .yin-yang {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-image: linear-gradient(to left, #fff, #fff 50%, #000 50%, #000);
            animation: roll 4s linear infinite;
        }

        .yin-yang::before {
            position: absolute;
            top: 0;
            left: 50%;
            content: '';
            transform: translateX(-50%);
            background-color: #fff;
            border: 18px solid #000;
            border-radius: 50%;
            width: 14px;
            height: 14px;
        }

        .yin-yang::after {
            position: absolute;
            bottom: 0;
            left: 50%;
            content: '';
            transform: translateX(-50%);
            background-color: #000;
            border: 18px solid #fff;
            border-radius: 50%;
            width: 14px;
            height: 14px;
        }

        @keyframes roll {
            from {
                transform: rotate(0);
            }
            to {
                transform: rotate(-360deg);
            }
        }

        .box {
            width: 400px;
            border: 1px solid #666;
            display: inline-block;
        }

        .box .list {
            width: 100%;
            border-bottom: 1px solid #666;
            display: flex;
            align-items: center;
            padding: 8px;
            box-sizing: border-box;
            opacity: 0;
            animation: show 0.5s ease 0s 1 normal;
            animation-fill-mode: forwards;
        }

        .box .list:last-child {
            border-bottom: none;
        }

        @keyframes show {
            from {
                opacity: 0;
                transform: translate(0, 100%);
            }
            to {
                opacity: 1;
                transform: translate(0, 0);
            }
        }

        .wrapper-container {
            width: 800px;
            height: 500px;
            position: relative;
        }

        .left-wrapper, .right-wrapper {
            position: absolute;
            top: 50%;
            margin-top: -180px;
        }

        .left-wrapper {
            left: 50px;
        }

        .right-wrapper {
            left: 76px;
            animation: moveReel 5s linear 0s forwards;
        }

        .left-reel, .right-reel {
            width: 20px;
            height: 300px;
            margin-left: 3px;
            background-image: linear-gradient(90deg, #843, #fbbc62, #cc5f3d);
        }

        .left-top-handle, .left-bottom-handle, .right-top-handle, .right-bottom-handle {
            width: 20px;
            height: 24px;
            margin-left: 3px;
            background-image: linear-gradient(90deg, #411c1d, #832c29, #411c1d);
        }

        .left-top-handle-border, .left-bottom-handle-border, .right-top-handle-border, .right-bottom-handle-border {
            width: 26px;
            height: 6px;
            border-radius: 6px;
            background-image: linear-gradient(90deg, #411c1d, #832c29, #411c1d);
        }

        .wrapper-content {
            position: absolute;
            border: 20px solid #e05717;
            border-right: none;
            width: 6px;
            height: 261px;
            left: 72px;
            top: 56%;
            margin-top: -180px;
            animation: expand 5s linear 0s forwards, showBorder 0s linear 4.8s forwards;
        }

        @keyframes moveReel {
            to {
                transform: translateX(500px);
            }
        }

        @keyframes expand {
            to {
                width: 500px;
            }
        }

        @keyframes showBorder {
            to {
                width: 468px;
                border-right: 20px solid #e05717;
            }
        }

        .border-image-clip-path {
            width: 200px;
            height: 100px;
            border: 10px solid;
            border-image: linear-gradient(45deg, gold, deeppink) 1;
            clip-path: inset(0 round 10px);
            animation: huerotate 6s infinite linear;
            filter: hue-rotate(360deg);
            display: inline-block;
        }

        @keyframes huerotate {
            0% {
                filter: hue-rotate(0deg);
            }
            100% {
                filter: hue-rotate(360deg);
            }
        }

        .flow {
            color: transparent;
            background: -webkit-linear-gradient(0deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: auto;
            animation: gradientText 300s infinite linear;
            display: inline-block;
        }

        @keyframes gradientText {
            0% {
                background-position: 0;
            }
            100% {
                background-position: 30000px;
            }
        }

        .border-gradient {
            width: 100px;
            height: 100px;
            display: inline-block;
            border: 4px solid;
            border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
        }

        .double-border {
            width: 200px;
            height: 100px;
            margin: 0 20px;
            background-color: lightgreen;
            border-left: 4px solid;
            border-image: linear-gradient(0deg, yellow 0%, yellow 50%, orangered 50%, orangered 100%) 2;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="flower"></div>

<div class="bubble"></div>

<div class="circle">
    <div class="yin-yang"></div>
    <div class="yin-yang"></div>
</div>

<label>
    <input type="text" id="input" oninput="valueChange(event)">
</label>
<button id="btn">获取选中内容</button>

<div class="box">
    <div class="list">化学里面的反应，你是氧来我是氢。</div>
    <div class="list">化学里面的反应，你是氧来我是氢。</div>
    <div class="list">化学里面的反应，你是氧来我是氢。</div>
    <div class="list">化学里面的反应，你是氧来我是氢。</div>
    <div class="list">化学里面的反应，你是氧来我是氢。</div>
</div>

<div class="wrapper-container">
    <div class="left-wrapper">
        <div class="left-top-handle-border"></div>
        <div class="left-top-handle"></div>
        <div class="left-reel"></div>
        <div class="left-bottom-handle"></div>
        <div class="left-bottom-handle-border"></div>
    </div>
    <div class="wrapper-content"></div>
    <div class="right-wrapper">
        <div class="right-top-handle-border"></div>
        <div class="right-top-handle"></div>
        <div class="right-reel"></div>
        <div class="right-bottom-handle"></div>
        <div class="right-bottom-handle-border"></div>
    </div>
</div>

<div class="border-image-clip-path"></div>

<p class="flow">垓下一曲离乱楚歌声四方，含悲辞君银剑雪落凝寒霜。</p>

<div class="border-gradient"></div>

<div class="double-border"></div>

<script>
  const oBtn = document.getElementById('btn')
  oBtn.onclick = function () {
    console.log(window.getSelection().toString())
  }
  const copyToClipboard = text => navigator?.clipboard?.writeText(text)

  function valueChange(e) {
    copyToClipboard(e.target.value);
  }
</script>
<script>
  const aLists = document.querySelectorAll('.list')
  for (let i = 0; i < aLists.length; i++) {
    aLists[i]['style']['animationDelay'] = 0.1 * (i + 1) + 's'
  }
</script>
</body>
</html>
